<template>
  <div>
    <Space>
      <a-button type="primary" @click="openUpload" preIcon="carbon:cloud-upload">
        导入招生分数
      </a-button>
    </Space>
    <UploadModal
      v-bind="bindValue"
      :previewFileList="fileList"
      @register="registerUploadModal"
      @change="handleChange"
      @delete="handleDelete"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch, unref, computed, defineProps } from 'vue';
  // import { Icon } from '/@/components/Icon';
  import {
    // Tooltip,
    Space,
  } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  // import { uploadContainerProps } from './props';
  import { omit } from 'lodash-es';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { isArray } from '/@/utils/is';
  // import { FileResultVO } from '/@/api/lamp/file/model/uploadModel';
  import { UploadPdfResult } from '/@/api/basic/import/model/index';
  import UploadModal from './UploadModal.vue';
  // import UploadPreviewModal from './UploadPreviewModal.vue';
  // import { Recordable } from '@vben/types';
  export default defineComponent({
    name: 'BasicUpload2',
    components: {
      UploadModal,
      Space,
      // UploadPreviewModal,
      // Icon,
      // Tooltip,
    },
    // props: [records],
    props: {
      records: { type: String },
    },
    emits: ['change', 'delete', 'preview-delete', 'update:value'],

    setup(props, { emit, attrs }) {
      const { t } = useI18n();
      function openUpload() {
        // alert(props.records);
        // console.log(props, '55555555555555');
        openPreviewModal();
      }
      // 上传modal
      const [registerUploadModal, { openModal: openPreviewModal }] = useModal();

      //   预览modal
      // const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();

      const fileList = ref<UploadPdfResult[]>([]);

      const showPreview = computed(() => {
        const { emptyHidePreview } = props;
        if (!emptyHidePreview) return true;
        return emptyHidePreview ? fileList.value.length > 0 : true;
      });

      const bindValue = computed(() => {
        const value = { ...attrs, ...props };
        return omit(value, 'onChange');
      });

      watch(
        () => props.value,
        (value = []) => {
          fileList.value = isArray(value) ? value : [];
        },
        { immediate: true },
      );

      // 上传modal保存操作
      function handleChange(files: UploadPdfResult[]) {
        fileList.value = [...unref(fileList), ...(files || [])];
        // console.log(fileList.value, '888888888888888888888888888');
        emit('update:value', fileList.value);
        emit('change', fileList.value, props.records);
        fileList.value = [];
        // emit('UploadId', props.records);
      }

      // 预览modal保存操作
      function handlePreviewChange(files: UploadPdfResult[]) {
        fileList.value = [...(files || [])];
        emit('update:value', fileList.value);
        emit('change', fileList.value);
      }

      function handleDelete(record: Recordable) {
        // console.log(record, '////////////////////////');
        emit('delete', record);
      }

      function handlePreviewDelete(id: string) {
        emit('preview-delete', id);
      }

      return {
        registerUploadModal,
        // openUploadModal,
        handleChange,
        handlePreviewChange,
        // registerPreviewModal,
        openPreviewModal,
        fileList,
        showPreview,
        bindValue,
        handleDelete,
        handlePreviewDelete,
        t,
        openUpload,
      };
    },
  });
</script>
